<template>
  <div class="waterplant-container">
    <div class="plankton-select">
      <span
        :class="{'plankton-click': item.isCheck}"
        v-for="(item, index) in list"
        :key="item.id"
        @click="selectOrder(index, list)"
      >{{item.title}}</span>
    </div>
    <el-card shadow="always" class="plankton-table">
      <component :is="currentView"></component>
    </el-card>
  </div>
</template>

<script>
import table1 from './components/s_animal.vue'
import table0 from './components/s_plant.vue'

export default {
  name: 'p_search',
  components: {
    table1,
    table0
  },
  data () {
    return {
      list: [{
        title: '浮游植物',
        id: 0,
        isCheck: true
      }, {
        title: '浮游动物',
        id: 1,
        isCheck: false
      }],
      currentView: 'table0'
    }
  },
  methods: {
    selectOrder (num, list) {
      let len = list.length
      for (let i = 0; i < len; i++) {
        list[i].isCheck = false
      }
      list[num].isCheck = true
      this.currentView = 'table' + [num]
    }
  }
}
</script>

<style lang="scss" scoped>
.plankton {
  &-select {
    background: #fff;
    overflow: hidden;
  }
  &-select span {
    float: left;
    color: rgba(0, 0, 0, 0.65);
    font-size: 16px;
    line-height: 24px;
    margin: 0 20px;
    padding: 10px 0;
    cursor: pointer;
    z-index: 1500;
  }
  &-click {
    border-bottom: 2px solid #1890ff;
    color: #1890ff !important;
  }
  &-table {
    margin: 20px;
  }
}
</style>
